<template>
  <div class="outPageBox">
    <div class="outPageBox-head">
      <img :src="detail.rpImgUrl" alt="" />
    </div>
    <div class="outPageBox-body">
      <div class="outPageBox-body-title">分分联红包 {{ detail.rpAmt }}元</div>
      <div class="outPageBox-body-content">
        <span>{{ detail.score }}</span>
        <span>积分</span>
      </div>
      <div class="outPageBox-body-time">
        有效期：
        <span v-if="detail.exType === 2">长期有效</span>
        <span v-else
          >{{ detail.exStartTime }}<strong style="margin: 0 5px">至</strong
          >{{ detail.exEndTime }}</span
        >
      </div>
    </div>
    <div class="outPageBox-foot">
      <div class="outPageBox-foot-introduce">
        <div class="outPageBox-foot-title">红包介绍</div>
        <div class="outPageBox-foot-text">
          <span>
            {{ detail.rpIntroduce }}
          </span>
        </div>
      </div>
      <div class="outPageBox-foot-description">
        <div class="outPageBox-foot-title">兑换说明</div>
        <div class="outPageBox-foot-text">
          <span>
            {{ detail.rpDesc }}
          </span>
        </div>
      </div>
      <div class="outPageBox-foot-notice">
        <div class="outPageBox-foot-title">客户须知</div>
        <div class="outPageBox-foot-text">
          <span>
            {{ detail.rpRemark }}
          </span>
        </div>
      </div>
    </div>
    <div class="outPageBox-bottom">
      <div @click="goToOrder">立即兑换</div>
    </div>
  </div>
</template>
<script>
import { getRedpacketDetail } from "@/api/score";
export default {
  data() {
    return {
      detail: {},
    };
  },
  created() {
    if (this.$route.query?.id) {
      const { id } = this.$route.query;
      this.getDetail(id);
    }
  },
  methods: {
    async getDetail(val) {
      const res = await getRedpacketDetail({ redpacketId: val });
      this.detail = { ...res.data };
    },
    goToOrder() {
      const detail = this.detail;
      localStorage.setItem("shopDetail", JSON.stringify(detail));
      this.$router.push({
        name: "order-detail",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.outPageBox {
  padding: 12px 0 80px;
  width: 100%;
  &-head {
    margin: 0 8px;
    border-radius: 16px;
    overflow: hidden;
    img {
      width: 100%;
      height: 206px;
    }
  }
  &-body {
    padding: 12px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    margin: 12px 8px;
    &-title {
      font-weight: 600;
      font-size: 20px;
      color: #39394d;
    }
    &-content {
      margin: 9px 0;
      display: flex;
      align-items: center;
      span:first-child {
        font-weight: 600;
        font-size: 24px;
        color: #ff5c00;
      }
      span:last-child {
        font-weight: 400;
        font-size: 10px;
        color: #ff5c00;
      }
    }
    &-time {
      font-weight: 400;
      font-size: 12px;
      color: #606265;
    }
  }
  &-foot {
    margin: 0 8px;
    padding: 12px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;
    &-title {
      font-weight: 600;
      font-size: 16px;
      color: #39394d;
    }
    &-text {
      span {
        white-space: pre-line;
        word-break: break-all;
        font-weight: 400;
        font-size: 12px;
        color: #909399;
      }
    }
    &-description,
    &-notice {
      margin-top: 20px;
    }
  }
  &-bottom {
    height: 74px;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    box-shadow: inset 0px 0.5px 0px #e0e0eb;
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 90%;
      height: 44px;
      background: linear-gradient(89.96deg, #ff8500 0.02%, #ff5f26 99.95%);
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 17px;
      color: #ffffff;
    }
  }
}
</style>
